<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>06_计算器练习</title>
    </head>
    <body>
        <input type="text" id="i1" placeholder="请输入数字1">
        <br>
        <input type="text" id="i2" placeholder="请输入数字2">
        <br>
        <button onclick="calc('+')">加</button>
        <button onclick="calc('-')">减</button>
        <button onclick="calc('*')">乘</button>
        <button onclick="calc('/')">除</button>
        <br>
        <h4>运算结果: <span></span></h4>

        <script>
            function calc(o){
                //1.获取用户在输入框中输入的数字
                let n1 = document.getElementById('i1').value;
                let n2 = document.getElementById('i2').value;
                //2.将获取到的字符串转为数值类型
                n1 = parseFloat(n1);
                n2 = parseFloat(n2);
                //3.获取用来显示结果的span元素
                let spanE = document.querySelector('span');
                console.log(spanE);
                //4.根据调用方法时传入的运算符进行指定的四则运算
                switch(o){
                    case '+':
                        spanE.innerHTML = n1 + n2;
                        break;
                    case '-':
                        spanE.innerHTML = n1 - n2;
                        break;
                    case '*':
                        spanE.innerHTML = n1 * n2;
                        break;
                    case '/':
                        if(n2!=0){
                            spanE.innerHTML = n1 / n2;
                        }else{
                            alert('除数不能为0!')
                        }
                }
            }
        </script>
    </body>
</html>